<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">

</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>


<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="销售总揽"><a href="Administrators_package.html">销售总揽</a></li>
        <li role="详细查询"><a href="Administrators_packageinformation.html">详细查询</a></li>
        <li role="返回主页"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">

            <span>套餐销售信息</span>

        </ul>
    </div>


</div>


<div id="userDetails" class="user-details"></div>

<div id="packageList"></div>

<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>
    function displayAllPackages() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/Allpackage", true);
        //没问题
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert("22222");
                    //alert(xhr.responseText);
                    var users = JSON.parse(xhr.responseText);
                    displayPackagesList(users);
                } else {
                    alert("Failed");
                }
            }
        };
        xhr.send();
    }

    function displayPackagesList(users) {
        var packageListDiv = document.getElementById("packageList");
        var html = "<table class='workers-table'>";
        // 表头
        html += "<tr>";
        html += "<th>手机号（phoneNumber）</th>";
        html += "<th>卡号（idCardNumber）</th>";
        html += "<th>套餐号（packageId）</th>";
        html += "</tr>";


        users.forEach(function (users) {
            html += "<tr>";
            html += "<td>" + users.phoneNumber + "</td>";
            html += "<td>" + users.idCardNumber + "</td>";
            html += "<td>" + users.packageId + "</td>";

            html += "</tr>";
        });

        html += "</table>";
        packageListDiv.innerHTML = html;
        var firstPackageId = users[0].packageId;
        alert("目前购买最多的套餐的套餐ID是" + firstPackageId);

    }

    // 在页面加载完成后调用 displayAllWorkers 函数来获取并展示全部的 worker 列表
    window.onload = function () {
        displayAllPackages();
    };
</script>
</body>
</html>